<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }
        
        li {
            width: 100px;
            height: 50px;
            background: lightblue;
            margin: 10px;
        }
        
        .box {
            width: 300px;
            height: 300px;
            border: 3px dotted red;
            margin-left: 60px;
        }
    </style>
</head>

<body>
    <ul>
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
    </ul>
    <div class="box"></div>
    <!-- ## -拖拽小方块，添加到下面的大盒子  原li删除    必做
把div上面的三个li多拖放几次到div中，每次拖拽都生成一个新的li -->
    <script>
        // 获取元素
        var oLi = document.querySelectorAll("li");
        var oBox = document.querySelector(".box");
        var oUl = document.querySelector("ul");
        // 1.拖拽元素
        for (let i = 0; i < oLi.length; i++) {
            oLi[i].ondragstart = function(ev) {
                this.style.background = "pink";
                // 拖拽时传的参数
                ev.dataTransfer.setData("text", this.innerHTML);

            }
        }

        // 进入拖拽的目的地
        oBox.ondragenter = function() {
                this.style.background = "orange";
            }
            // 想要触发drop事件必须组织默认行为
        oBox.ondragover = function(ev) {
                ev.preventDefault();
            }
            // 默认  即使在 目的地上面释放鼠标，也不会触发drop
        oBox.ondrop = function(ev) {
                console.log(ev.dataTransfer.getData("text"));
                // 创建li
                var oLi = document.createElement("li");
                //ev.dataTransfer.getData 获取拖拽的参数
                oLi.innerHTML = ev.dataTransfer.getData("text");
                oBox.appendChild(oLi);
                // 删除拖拽的li
                oUl.removeChild(oUl.children[ev.dataTransfer.getData("text") - 1]);

            }
            // 从目的地离开
        oBox.ondragleave = function() {
            this.style.background = "blue";

        }
    </script>
</body>

</html>